<div class="palm-page-header">
	<div class="palm-page-header-wrapper">
		<div class="pref-icon">
			<img src="images/date_small.png"></img>
		</div>
		<div class="title" x-mojo-loc="" id="headerTitle">
			Preferences
		</div>
	</div>
</div>

<div class="palm-row-wrapper">
	<div x-mojo-element="Button" id="refresh_and_hide_button" class="buttonClass" name="refresh_and_hide_button"></div>
</div>

<div class="palm-group">
	<div class="palm-group-title" x-mojo-loc="">
        Filter
    </div>
	<div class="palm-list">
		<div class="palm-row first">
			<div class="palm-row-wrapper">
				<div x-mojo-element="ToggleButton" id="togglebuttonShowAllDayEvents" class="togglebuttonClass"></div>
                <div class="title" x-mojo-loc="">Show All Day Events</div>
			</div>
		</div>
		<div class="palm-row">
			<div class="palm-row-wrapper">
				<div x-mojo-element="ToggleButton" id="togglebuttonShowTimedEvents" class="togglebuttonClass"></div>
                <div class="title" x-mojo-loc="">Show Timed Events</div>
			</div>
		</div>
		<div class="palm-row last">
			<div class="palm-row-wrapper">
				<div x-mojo-element="ToggleButton" id="togglebuttonShowPassedEvents" class="togglebuttonClass"></div>
                <div class="title" x-mojo-loc="">Show Passed Events</div>
			</div>
		</div>	
	</div>
</div>

<div class="palm-group">
	<div class="palm-group-title">
		View
	</div>
	<div class="palm-list">
		<div class="my-palm-row my-palm-row-first">
			<div class="palm-row-wrapper pick-row">
				<div id="upcoming_days" x-mojo-element="IntegerPicker" align="right"}></div>
			</div>
		</div>
		<div class="my-palm-row my-palm-row-last">
			<div class="palm-row-wrapper pick-row">
				<div id="maximum_events" x-mojo-element="IntegerPicker" align="right"}></div>
			</div>
		</div>
	</div>
</div>
			
<div class="palm-group">
	<div class="palm-group-title">
		Refresh Interval
	</div>
	<div class="palm-list">
		<div class="my-palm-row my-palm-row-first">
			<div class="palm-row-wrapper pick-row">
				<div id="refresh_minutes" x-mojo-element="IntegerPicker" align="right"></div>
			</div>
		</div>
		<div class="my-palm-row my-palm-row-last">
			<div class="palm-row-wrapper pick-row">
				<div id="refresh_hours" x-mojo-element="IntegerPicker" align="right"></div>
			</div>
		</div>
	</div>
</div>

<div class="palm-group">
    <div class="palm-group-title">
        Calendars to Show
    </div>
    <div class="palm-list">
        <div class="palm-row last">
            <div class="palm-row-wrapper">
                <div x-mojo-element="List" id="calendarList">
                </div>
            </div>
        </div>
    </div>
</div>
